<template>
	<div style='padding-bottom:30px;'>
		<el-pagination
			background
		@size-change = 'handleSizeChange'
		@current-change = 'handleCurrentChange'
		:current-page = 'p'
		:page-sizes = '[10, 20,30,50, 100, 200]'
		:page-size = 'size'
		layout = 'total, sizes, prev, pager, next, jumper'
		:total = 'total'>
		</el-pagination>
	</div>
</template>

<script>
	import { Request, filterEmptyParam } from '@/utils'
	let request = new Request()
	
	export default {
		props : {
			url         : {
				type : String,
				default : ''
			},
			query       : {
				type : Object,
				default : {}
			},
			size : {
				type : Number,
				default : 10
			},
			autoInit : {
				type : Boolean,
				default : true
			}
		},
		
		data () {
			return {
				init : 1,
				p : 1,
				total : 0
			}
		},
		
		methods : {

			getPage : function(){
				let query = Object.assign({}, this.query)
				query.page = this.p
				query.pageSize = this.size
				if(this.init){
					query.init = this.init
				}
				
				
				request.get(this.url, res => {
					try{
						let data = res.data
						if('total' in data){
							this.init = 0
							this.total = data.total
						}
						this.$emit('page', data.list)
					}catch(e){}
				}, query)
			},
			
			handleSizeChange : function(size){ //每页显示多少行改变
				this.pageSize = size
				this.init = 1
				
				this.getPage(1)
			},
			
			handleCurrentChange : function(p){ //选择第几页
				this.p = p
				this.getPage(p)
			},
			
			initPage  : function(){
				this.init = 1
				this.p = 1
				this.getPage()
			},
			
			setInit : function(init){
				this.init = init
			}
			
		},
		
		created : function(){
			this.pageSize = this.size
			if(this.autoInit){
				this.initPage()
			}
		}
	}
</script>